import React, { Component } from 'react'
import { messages } from "share/common";
import SlideFrame from 'components/slide-frame'
import Info from 'components/info'
import AdvanceTable from 'components/advanced-table'
import { Button } from 'antd'
import companyAccountSettingService from '../company-account-setting.service'
import AccountRule from './account-rule'
import ExportModal from "components/template/export-modal/export-modal";
import menuRoute from 'routes/menuRoute'
import Importer from "components/template/importer/index";
import Space from "components/space";
import DataHoc from "../hoc/data-hoc";

@DataHoc
class CompanyAccount extends Component {

  key = 'bank-account';

  service = (page, pageSize, searchParams) => {
    return companyAccountSettingService.getList({page, size: pageSize, ...searchParams});
  };

  handleRule = record => {
    SlideFrame.open({
      content: AccountRule,
      afterClose: value => { value && this.tableRef.getList() },
      title: messages('finance-4.key21')/*银行账户*/,
      params: { record }
    }, this);
  };

  render() {
    const { getColumns, getSearch } = this.props;
    return(
      <AdvanceTable.SimpleTable
        service={this.service}
        searchForm={getSearch(this.key)}
        columns={getColumns(this.key)}
        onRef={ref => this.tableRef = ref}
        rowKey='id'
        onRow={record => ({onClick: () => { this.props.context.router.push(menuRoute.getRouteItem('bank-account-detail', 'key').url.replace(":companyBankId", record.id)) }})}
      >
        <Space size='middle' direction='vertical'>
          <Info
            dataSource={{ description: messages('finance-4.key370')/*您可在此页面维护企业银行账户，进行使用人员授权、付款方式授权、付款单据公司授权，系统将根据您配置的授权，自动判断支付操作时允许使用的企业付款账号；*/ }}
            attributes={[{
              title: messages('finance-4.key351')/*设置说明*/, dataIndex: 'description', span: 24
            }]}
          />
          <Space>
            <Button type='primary' onClick={() => this.handleRule({})}>{messages('finance-4.key352')/*新建账户*/}</Button>
            <Importer
              btnName={messages('finance-4.key371')/*批量导入*/}
              btnProps={{type: 'default'}}
              templateOptions={{
                templateList: [{
                  templateName: messages('finance-4.key372')/*银行信息导入模板*/,
                  downloadUrl: `/api/CompanyBank/template/download`
                }, {
                  templateName: messages('finance-4.key373')/*账户授权导入模版*/,
                  downloadUrl: `/api/template/download?type=AccountAuthorization`
                }, {
                  templateName: messages('finance-4.key374')/*付款方式模版*/,
                  downloadUrl: `/api/template/download?type=PaymentMethod`
                }, {
                  templateName: messages('finance-4.key375')/*付款公司授权模版*/,
                  downloadUrl: `/api/template/download?type=PaymentCompanyAuthorization`
                }]
              }}
              onOK={() => this.tableRef.getList()}
              errorTableData={data => Importer.getUploadResult(data)}
              totalError={data => data && data.totalEntities ? data.totalEntities : 0}
              uploadOptions={{
                uploadUrl: `/api/company/import`,
                listenUrl: '/api/batch/transaction/logs/v2'
              }}
              uploadResultOptions={{
                shouldDownloadErrorInfo: true,
                errorUrl: '/api/batch/transaction/logs/failed/export/company',
                getErrorTableVisible: uploadResult => uploadResult && uploadResult.failureEntities > 0
              }}
            />
            <ExportModal
              type={'btn'}
              style={{ display: 'inline-block' }}
              codeCheck
              exportTitle={messages('finance-4.key376')/*导出账户数据*/}
              exportType="COMPANY"
              exportCommand={"company_bank"}
            />
          </Space>
        </Space>
      </AdvanceTable.SimpleTable>
    )
  }

}

export default CompanyAccount
